<div class="layui-fluid layui-anim febs-anim" id="febs-sellStat" lay-title="售书统计"
     xmlns:th="http://www.thymeleaf.org">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                    <div class="b">
                        <div class="h">
                            <h1>售书统计</h1>
                            <div class="showTime">当前时间：2021年1月5-0时54分14秒</div>
                            <script>
                                var t = null;
                                t = setTimeout(time, 1000); //開始运行
                                function time() {
                                    clearTimeout(t); //清除定时器
                                    dt = new Date();
                                    var y = dt.getFullYear();
                                    var mt = dt.getMonth() + 1;
                                    var day = dt.getDate();
                                    var h = dt.getHours(); //获取时
                                    var m = dt.getMinutes(); //获取分
                                    var s = dt.getSeconds(); //获取秒
                                    document.querySelector(".showTime").innerHTML =
                                        "当前时间：" +
                                        y +
                                        "年" +
                                        mt +
                                        "月" +
                                        day +
                                        "-" +
                                        h +
                                        "时" +
                                        m +
                                        "分" +
                                        s +
                                        "秒";
                                    t = setTimeout(time, 1000); //设定定时器，循环运行
                                }
                            </script>
                        </div>
                        <h3 class="switchYear"
                            style="text-align: center;font-size: 24px;font-weight: bold;color: #aaaaaa;margin-top: 10px">
                            <a href="javascript:;">2020</a>
                            <a href="javascript:;">2021</a>
                        </h3>
                        <div class="mainbox">
                            <div class="column">
                                <div class="panel">
                                    <div class="chart s2"></div>
                                    <div class="panel-footer"></div>
                                </div>
                                <div class="panel">
                                    <div class="chart c6"></div>
                                    <div class="panel-footer"></div>
                                </div>
                            </div>
                            <div class="column">
                                <div class="no">
                                    <div class="no-hd">
                                        <ul>
                                            <li id="in"></li>
                                            <li id="out"></li>
                                        </ul>
                                    </div>
                                    <div class="no-bd">
                                        <ul>
                                            <li>购进数量</li>
                                            <li>售出数量</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="map">
                                    <div class="chart"></div>
                                    <div class="map1"></div>
                                    <div class="map2"></div>
                                    <div class="map3"></div>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            var $ = layui.jquery;
                            var yearOld = {year: new Date().getFullYear()};

                            $(".switchYear").on("click", "a", function () {
                                yearOld.year = $(this).html();
                                f1();
                                f2();
                                f6();
                            });

                            function f1() {
                                $.ajax({
                                    type: "get",
                                    url: ctx + 'sellStat/total/' + yearOld.year,
                                    dataType: 'JSON',
                                    cache: false,
                                    contentType: "application/json;charset=utf-8",
                                    success: function (res) {
                                        var data = res.data;
                                        document.getElementById("in").innerText = data[0];
                                        document.getElementById("out").innerText = data[1];
                                    },
                                });
                            }

                            function f2() {
                                $.ajax({
                                    type: "get",
                                    url: ctx + 'sellStat/line/' + yearOld.year,
                                    dataType: 'JSON',
                                    cache: false,
                                    contentType: "application/json;charset=utf-8",
                                    success: function (res) {
                                        var data = res.data;

                                        // 基于准备好的dom，初始化echarts实例
                                        var myChart2 = echarts.init(document.querySelector(".s2"));

                                        // 2. 指定配置和数据
                                        var option = {
                                            color: ["#00f2f1", "#ed3f35", "yellow"],
                                            title: {
                                                text: '月份类型统计',
                                                left: 'left',
                                                top: 6,
                                                textStyle: {
                                                    color: '#ccc',
                                                    fontSize: 12
                                                }
                                            },
                                            tooltip: {
                                                // 通过坐标轴来触发
                                                trigger: "axis"
                                            },
                                            toolbox: {
                                                show: true,
                                                itemSize: 12,
                                                feature: {
                                                    dataZoom: {
                                                        yAxisIndex: 'none'
                                                    },
                                                    dataView: {readOnly: false},
                                                    magicType: {type: ['bar', 'line']},
                                                    restore: {},
                                                    saveAsImage: {}
                                                }
                                            },
                                            legend: {
                                                top: '25px',
                                                // 距离容器10%
                                                right: "10%",
                                                // 修饰图例文字的颜色
                                                textStyle: {
                                                    color: "#4c9bfd"
                                                }
                                                // 如果series 里面设置了name，此时图例组件的data可以省略
                                                // data: ["邮件营销", "联盟广告"]
                                            },
                                            grid: {
                                                top: "20%",
                                                left: "3%",
                                                right: "4%",
                                                bottom: "3%",
                                                show: true,
                                                borderColor: "#012f4a",
                                                containLabel: true
                                            },
                                            xAxis: {
                                                type: "category",
                                                boundaryGap: false,
                                                data: [
                                                    "1月",
                                                    "2月",
                                                    "3月",
                                                    "4月",
                                                    "5月",
                                                    "6月",
                                                    "7月",
                                                    "8月",
                                                    "9月",
                                                    "10月",
                                                    "11月",
                                                    "12月"
                                                ],
                                                // 去除刻度
                                                axisTick: {
                                                    show: false
                                                },
                                                // 修饰刻度标签的颜色
                                                axisLabel: {
                                                    interval: 0,
                                                    color: "rgba(255,255,255,.7)"
                                                },
                                                // 去除x坐标轴的颜色
                                                axisLine: {
                                                    show: false
                                                },
                                            },
                                            yAxis: {
                                                color: "#012f4a",
                                                type: "value",
                                                // 去除刻度
                                                axisTick: {
                                                    show: false
                                                },
                                                // 修饰刻度标签的颜色
                                                axisLabel: {
                                                    color: "rgba(255,255,255,.7)"
                                                },
                                                // 修改y轴分割线的颜色
                                                splitLine: {
                                                    lineStyle: {
                                                        color: "#012f4a"
                                                    }
                                                }
                                            },
                                            series: [
                                                {
                                                    name: "购进数量",
                                                    type: "line",
                                                    // stack: "总量",
                                                    // 是否让线条圆滑显示
                                                    smooth: true,
                                                    data: data[0]
                                                },
                                                {
                                                    name: "售出数量",
                                                    type: "line",
                                                    // stack: "总量",
                                                    smooth: true,
                                                    data: data[1]
                                                },
                                            ]
                                        };
                                        // 3. 把配置和数据给实例对象
                                        myChart2.setOption(option);
                                        window.addEventListener("resize", function () {
                                            myChart2.resize();
                                        });
                                    }
                                });
                            }

                            function f6() {
                                // 1. 实例化对象
                                var myChart6 = echarts.init(document.querySelector(".c6"));
                                // 2. 指定配置项和数据
                                var option = {
                                    title: {
                                        text: '地区统计',
                                        left: 'left',
                                        top: 6,
                                        textStyle: {
                                            color: '#ccc',
                                            fontSize: 12
                                        }
                                    },
                                    legend: {
                                        top: "90%",
                                        itemWidth: 10,
                                        itemHeight: 10,
                                        textStyle: {
                                            color: "rgba(255,255,255,.5)",
                                            fontSize: "12"
                                        }
                                    },
                                    tooltip: {
                                        trigger: "item",
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    toolbox: {
                                        show: true,
                                        itemSize: 12,
                                        feature: {
                                            dataZoom: {
                                                yAxisIndex: 'none'
                                            },
                                            dataView: {readOnly: false},
                                            restore: {},
                                            saveAsImage: {}
                                        }
                                    },
                                    // 注意颜色写的位置
                                    color: [
                                        "#006cff",
                                        "#60cda0",
                                        "#ed8884",
                                        "#ff9f7f",
                                        "#0096ff",
                                        "#9fe6b8",
                                        "#32c5e9",
                                        "#1d9dff"
                                    ],
                                    series: [
                                        {
                                            name: "买家地址统计",
                                            type: "pie",
                                            // 如果radius是百分比则必须加引号
                                            radius: ["10%", "70%"],
                                            center: ["50%", "42%"],
                                            roseType: "radius",
                                            data: [],
                                            // 修饰饼形图文字相关的样式 label对象
                                            label: {
                                                fontSize: 10
                                            },
                                            // 修饰引导线样式
                                            labelLine: {
                                                // 连接到图形的线长度
                                                length: 10,
                                                // 连接到文字的线长度
                                                length2: 10
                                            }
                                        }
                                    ]
                                };

                                // 3. 配置项和数据给我们的实例化对象
                                myChart6.setOption(option);
                                // 4. 当我们浏览器缩放的时候，图表也等比例缩放
                                window.addEventListener("resize", function () {
                                    // 让我们的图表调用 resize这个方法
                                    myChart6.resize();
                                });

                                var str = [];
                                c();

                                function c() {
                                    $.ajax({
                                        type: "get",
                                        url: ctx + 'sellStat/pctn/' + yearOld.year,
                                        dataType: 'JSON',
                                        cache: false,
                                        contentType: "application/json;charset=utf-8",
                                        success: function (res) {
                                            var data = res.data;
                                            for (let dataKey in data) {
                                                str.push({
                                                    name: data[dataKey].location,
                                                    value: data[dataKey].number
                                                })
                                            }
                                            myChart6.setOption({        //加载数据图表
                                                series: [{
                                                    data: str
                                                }]
                                            });
                                        }
                                    });
                                    str.length = 0;
                                }
                            }

                            f1();
                            f2();
                            f6();
                        </script>
                        <script src="echarts/china.js"></script>
                        <script src="echarts/myMap.js"></script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


